<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>窗体对象</title>
	</head>
	<body>
		<div id="pageCover" class="pageCover"></div>
		<input type="button" value="窗体对象" onclick="openDialog()" />
		<div id="dlgTest" class="dialog">
			<img class="close" alt="关闭" src="img/close.png" />
			<div class="title">窗体对象</div>
			<div class="content">我是一个窗体对象</div>
		</div>
	</body>
</html>
<style type="text/css">
	html,body{
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.dialog{
		position: fixed;
		width: 300px;
		height: 300px;
		top: 50%;
		left: 50%;
		margin-top: -200px;
		margin-left: -200px;
		box-shadow: 2px 2px 4px #ccc;
		background-color: #f1f1f1;
		z-index: 30;
		display: none;
	}
	.dialog .title{
		font-size: 16px;
		font-weight: bold;
		color: #000000;
		padding: 4px;
		background-color: #ffaa7f;
	}
	.dialog .close{
		width: 20px;
		height: 20px;
		margin: 3px;
		float: right;
		cursor: pointer;
	}
	.close:hover{
		background-color: #9ECCF5;
		border-radius: 40%;
	}
	.pageCover{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 10;
		background-color: #666;
		opacity: 0.5;
		display: none;
	}
	.content{
		text-align: center;
	}
</style>

<script type="text/jscript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	function EventTarget(){
		this.handlers={};
	}
	EventTarget.prototype={
		constructor:EventTarget,
		addHandler:function(type,handler){
			if(typeof this.handlers[type]=="undefined"){
				this.handlers[type]=new Array();
			}
			this.handlers[type].push(handler);
		},
		removeHandler:function(type,handler){
			if(this.handlers[type] instanceof Array){
				var handlers=this.handlers[type];
				for(var i=0,len=handlers.length;i<len;i++){
					if(handler[i]==handler){
						handlers.splice(i,1);
						break;
					}
				}
			}
		},
		trigger:function(event){
			if(!event.target){
				event.target=this;
			}
			if(this.handlers[event.type] instanceof Array){
				var handlers=this.handlers[event.type];
				for(var i=0,len=handlers.length;i<len;i++){
					handlers[i](event);
				}
			}
		}
	}
	function extend(subType,superType){
		var prototype=Object(superType.prototype);
		prototype.constructor=subType;
		subType.prototype=prototype;
	}
	function Dialog(id){
		EventTarget.call(this);
		this.id=id;
		var that=this;
		document.getElementById(id).children[0].onclick=function(){
			that.close();
		}
	}
	
	extend(Dialog,EventTarget);
	
	Dialog.prototype.show=function(){
		var dlg=document.getElementById(this.id);
		dlg.style.display="block";
		dlg=null;
	}
	Dialog.prototype.close=function(){
		var dlg=document.getElementById(this.id);
		dlg.style.display="none";
		dlg=null;
		this.trigger({type:'close'});
	}
	function openDialog(){
		var dlg=new Dialog("dlgTest");
		dlg.addHandler("close",function(){
			document.getElementById("pageCover").style.display="none";
		});
		document.getElementById("pageCover").style.display="block";
		dlg.show();
	}
</script>
